<template>
  <el-drawer
    v-if="dialogVisible"
    size="70%"
    :destroy-on-close="true"
    :visible.sync="dialogVisible"
    :before-close="onClose"
  >
    <div slot="title">
      {{ title }}
      <slot name="header"></slot>
    </div>
    <div class="drawer-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="baseInfo">
          <baseInfo :companyId="companyId"></baseInfo>
        </el-tab-pane>
        <el-tab-pane
          label="开户行信息"
          name="sysBankAccount"
          v-if="$store.getters.roles.includes('SYS_BANK_ACCOUNT')"
        >
          <sysBankAccount :companyId="companyId"></sysBankAccount>
        </el-tab-pane>
        <el-tab-pane
          label="处罚信息"
          name="sysPunish"
          v-if="$store.getters.roles.includes('SYS_PUNISH')"
        >
          <sysPunish :companyId="companyId"></sysPunish>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import baseInfo from "@/views/sysCompany/components/BaseInfo";
import sysBankAccount from "@/views/sysBankAccount";
import sysPunish from "@/views/sysPunish/sysCompanyPunish";

export default {
  components: { baseInfo, sysBankAccount, sysPunish },
  data() {
    return {
      dialogVisible: false,
      title: "",
      companyId: "",
      url: "",
      activeName: "baseInfo",
    };
  },
  methods: {
    onShow(id, name, url) {
      if (id) {
        this.companyId = id;
        this.title = name;
        this.url = url;
      }
      this.dialogVisible = true;
    },
    onClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
.el-drawer__wrapper /deep/ .el-drawer__header {
  margin-bottom: 0px !important;
}

.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.el-drawer.rtl {
  overflow: scroll;
}
</style>
